<template>
  <div class="container">
    <div class="code">
      <el-tabs
          v-model="activeName"
          type="card"
          class="code-tabs"
          @tab-click="handleClick">
        <el-tab-pane label="邀请码生成器" name="first">
          <div class="first">
            <div class="welcome">邀请码生成器</div>
            <el-form ref="refCodeForm" :model="codeForm" class="codeForm" :rules="genRules">
              <el-form-item prop="userphone">
                <el-input
                    ref="userphone"
                    v-model="codeForm.userphone"
                    placeholder="请输入手机号码"
                    name="userphone"
                    type="text"
                    tabindex="1"
                    auto-complete="on"></el-input>
              </el-form-item>
              <el-form-item label="你的邀请码：" style="color: #409EFF">
                <span style="color: red">{{codeForm.share_code}}</span>
              </el-form-item>
              <el-button :loading="loading" type="primary" style="width:100%;margin-top:30px;"
                         @click.prevent="createCode(refCodeForm)">生成邀请码</el-button>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="批量用户ID生成器" name="second">
          <div class="second">
            <div class="welcome">批量用户ID生成器</div>
            <el-form ref="refUserForm" :model="userForm" class="userForm" label-position="right" :rules="codeRules">
              <el-form-item prop="begin_id" label="起始ID号">
                <el-input
                    ref="begin_id"
                    v-model="userForm.begin_id"
                    placeholder="起始ID号,例如10000"
                    name="begin_id"
                    type="text"
                    tabindex="1"
                    auto-complete="on"></el-input>
              </el-form-item>
              <el-form-item prop="end_id" label="结束ID号">
                <el-input
                    ref="end_id"
                    v-model="userForm.end_id"
                    placeholder="结束ID号,例如99999"
                    name="end_id"
                    type="text"
                    tabindex="1"
                    auto-complete="on"></el-input>
              </el-form-item>
              <el-button :loading="loading" type="primary" style="width:100%;margin-top:30px;"
                         @click.prevent="createUserId(refUserForm)" >批量生成用户ID</el-button>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-popover content="点击切换界面" trigger="hover" placement="top-start">
        <template #reference>
          <svg-icon class="setting" name="gear-fill" size="30" @click="switchRegister"></svg-icon>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script lang="ts">
import {validContactPhone, validNumber} from "@/utils/validate";
import {reactive, ref} from "vue";
import {FormInstance} from "element-plus";
import {useUserStore} from "@/store/user";

export default {
  name: "GenerateCode",
  setup(props: any, context: any) {
    const loading = ref(false);
    const activeName = ref('first');
    const codeForm  = reactive({
      userphone: '',
      share_code: ''
    })

    const userForm = reactive({
      begin_id: '',
      end_id: ''
    })

    const refCodeForm = ref<FormInstance>();
    const refUserForm = ref<FormInstance>();

    const validateContact = (rule: any, value: any, callback: any) => {
      if (!validContactPhone(value) || value.length !== 11) {
        callback(new Error('请输入正确的手机号'))
      }  else {
        callback();
      }
    };
    const validateNumber = (rule: any, value: any, callback: any) => {
      if (!validNumber(value)) {
        callback(new Error('ID号必须为纯数字'))
      } else {
        callback();
      }
    };

    const genRules = reactive({
      userphone: [{required: true, trigger: 'blur', validator: validateContact}],
    })
    const codeRules = reactive({
      begin_id: [{required: true, trigger: 'blur', validator: validateNumber}],
      end_id: [{required: true, trigger: 'blur', validator: validateNumber}]
    })

    const handleClick = () => {
      console.log('tab, event')
    }

    const switchRegister = () => {
      context.emit('switchRegister');
    }

    const createCode = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      const userStore = useUserStore();
      formEl.validate((valid: boolean, fields) => {
        if (valid) {
          loading.value = true;
          userStore.toCreateCode(codeForm.userphone).then((data: any) => {
            codeForm.share_code = data.share_code;
            loading.value = false
          }).catch(error => {
            loading.value = false;
            console.log(error);
            return false
          })
        } else {
          loading.value = false
          console.log('error submit!!', fields);
          return false
        }
      })
    }

    const createUserId = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      const userStore = useUserStore();
      formEl.validate((valid: boolean, fields) => {
        if (valid) {
          loading.value = true;
          let reqParam = {begin: 0, end: 0};
          reqParam.begin = parseInt(userForm.begin_id);
          reqParam.end   = parseInt(userForm.end_id);
          userStore.toCreateUserId(reqParam.begin, reqParam.end).then(res => {
            loading.value = false
          }).catch(error => {
            loading.value = false;
            console.log(error);
            return false
          })
        } else {
          loading.value = false
          console.log('error submit!!', fields);
          return false
        }
      })
    }

    return {
      loading,
      activeName,
      codeForm,
      userForm,
      refCodeForm,
      refUserForm,
      genRules,
      codeRules,
      handleClick,
      switchRegister,
      createCode,
      createUserId
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/variable";
  .code {
    width: 100%;
    height: 100%;
    display: inline-block;
    background-color: $color-background-base;

    .code-tabs {
      margin: 20px;

      .first, .second {
        margin: 20px;
      }
      .codeForm, .userForm {
        margin-top: 80px;
      }
    }

    .welcome {
      text-align: center;
      font-size: 44px;
      margin-bottom: 20px;
    }

    .setting {
      position: fixed;
      right: 10px;
      bottom: 10px;
      outline: none;
    }
  }
</style>
